<!--
ElForm示例
@author pan
@createDate 2022/02 2022/2/28 17:19
-->
<script setup lang="ts" name="ElFormPage">
import { ContentTag } from 'components/index'
import { QuestionFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import { nextTick, reactive, ref } from 'vue'

const customErrorFormData = reactive({
  customErrorName: '',
  customErrorAge: null,
})
const customErrorFormRef = ref()
const customSetErrorFormRef = ref()
const customSetErrorFormErrorMap = reactive(new Map<string, string>())

function onSetCustomErrorMsg(prop: string) {
  customSetErrorFormErrorMap.delete(prop)
  nextTick(() =>
    customSetErrorFormErrorMap.set(
      prop,
      prop === 'customErrorName' ? '输个姓名，谢谢' : '输个年龄，谢谢'
    )
  )
}
</script>

<template>
  <ContentTag>
    <!-- 自定义label:开始 -->
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>自定义label</span>
        </div>
      </template>
      <el-form>
        <el-form-item label="姓名">
          <template #label="scope">
            {{ scope.label }}
            <el-tooltip effect="light" content="自定义提示" placement="top">
              <el-icon>
                <question-filled />
              </el-icon>
            </el-tooltip>
          </template>
          <el-input></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 自定义label:结束 -->

    <!-- 自定义error:开始 -->
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>自定义error</span>
        </div>
      </template>
      <el-form ref="customErrorFormRef" :model="customErrorFormData">
        <el-form-item
          label="姓名"
          prop="customErrorName"
          :rules="[{ required: true, message: '输入一下姓名吧' }]"
        >
          <template #error="scope">
            <div>
              <el-tooltip :content="scope.error" placement="top">
                <el-link type="danger">
                  鼠标移入这里查看错误详细信息
                  <el-icon>
                    <circle-close-filled />
                  </el-icon>
                </el-link>
              </el-tooltip>
            </div>
          </template>
          <el-input v-model="customErrorFormData.customErrorName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="() => customErrorFormRef.validate(() => console.log(1))"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 自定义error:结束 -->

    <!-- 手动设置错误信息:开始 -->
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>手动设置错误信息</span>
        </div>
      </template>
      <el-form ref="customSetErrorFormRef" :model="customErrorFormData">
        <el-form-item
          label="姓名"
          prop="customErrorName"
          :error="customSetErrorFormErrorMap.get('customErrorName')"
          :rules="[{ required: true, message: '输入一下姓名吧' }]"
        >
          <el-input v-model="customErrorFormData.customErrorName"></el-input>
        </el-form-item>
        <el-form-item
          label="年龄"
          prop="customErrorAge"
          :error="customSetErrorFormErrorMap.get('customErrorAge')"
          :rules="[{ required: true, message: '输入一下年龄吧' }]"
        >
          <el-input v-model="customErrorFormData.customErrorName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="() => customSetErrorFormRef.validate(() => console.log(1))"
          >
            提交
          </el-button>
          <el-button @click="onSetCustomErrorMsg('customErrorAge')">
            手动填充年龄错误信息
          </el-button>
          <el-button @click="onSetCustomErrorMsg('customErrorName')">
            手动填充姓名错误信息
          </el-button>
          <el-button @click="customSetErrorFormRef.clearValidate()">
            清除所有验证信息
          </el-button>
          <el-button
            @click="customSetErrorFormRef.clearValidate('customErrorName')"
          >
            清除姓名验证信息
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 手动设置错误信息:结束 -->
  </ContentTag>
</template>

<style lang="scss" scoped></style>
